import { merge } from "lodash";
import china from "./china.js";

// baseOption.js
export default {
    tooltip: {
        // 相对位置
        position: "top"
    },
    legend: {
        orient: 'horizontal',
        type: 'plain',
        textStyle: {
            fontSize: 14,
            color: '#676E75'
        },
    },
    grid: {
        top: "10%",
        left: "0%",
        right: "15px",
        bottom: "0%",
        containLabel: true,
    },
    xAxis: {
        boundaryGap: false,
        axisLine: { //轴颜色
            lineStyle: {
                color: "#DAE1E9"
            }
        },
        axisLabel: { //x轴文字颜色
            color: "#676E75",
            fontSize: 14
        },
    },
    yAxis: {
        splitLine: {
            lineStyle: {
                color: "#DAE1E9"
            }
        },
        axisLabel: { //y轴文字颜色
            color: "#676E75",
            fontSize: 14
        },
    },
};

export function getPieOption(option) {
    var pieOption = {
        tooltip: {
            trigger: 'item'
        },
        color: ["#537ef7", "#ffc954", "#f3a31e", "#009688", "#7acba1", "#7dd9f4", "#0eb8d8", "#ff9a84", "#8376ec", "#6b5ee2"],
        yAxis: { axisLine: { show: false } },
        legend: { show: false },
        series: [
            {
                name: '',
                type: 'pie',
                radius: ['20%', '75%'],
                avoidLabelOverlap: false,
                label: {
                    show: true,
                    position: 'outside',
                    overflow: 'truncate'
                },
                emphasis: { label: { show: true } },
                labelLine: { show: true },
                tooltip: {
                    valueFormatter: function (value) {
                        return value + '%';
                    }
                },
                data: []
            }
        ]
    }
    return merge({}, pieOption, option);
}

export function getLineOption(option) {
    var lineOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: "#E6E7EB"
                }
            }
        },
        legend: { itemGap: 30 },
        dataZoom: [
            {
                type: "slider",
                show: false,
                handleSize: 0,
                brushSelect: false,
                height: 15,
                bottom: 5,
                maxValueSpan: 30
            }
        ],
        xAxis: {
            type: 'category',
            axisLine: { //轴颜色
                lineStyle: {
                    color: "#DAE1E9"
                }
            },
            axisLabel: { //x轴文字颜色
                color: "#676E75",
                fontSize: 14
            },
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: { //y轴文字颜色
                color: "#676E75",
                fontSize: 14
            }
        },
        grid: {
            left: "2%",
            right: "2%",
        },
        series: []
    }
    return merge({}, lineOption, option);
}

export function getLineColumnOption(option) {
    var lineColumnOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                lineStyle: {
                    color: "#E6E7EB"
                }
            }
        },
        legend: { itemGap: 30 },
        dataZoom: [
            {
                type: "slider",
                show: false,
                handleSize: 0,
                brushSelect: false,
                height: 15,
                bottom: 5,
                maxValueSpan: 30
            }
        ],
        grid: {
            left: "5%",
            right: "5%",
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisLine: { //轴颜色
                lineStyle: {
                    color: "#DAE1E9"
                }
            },
            axisLabel: { //x轴文字颜色
                color: "#676E75",
                fontSize: 14
            },
        }],
        yAxis: [{
            type: 'value',
            name: '',
            nameLocation: 'middle',
            nameGap: 50,
            axisLabel: { //y轴文字颜色
                formatter: '{value}',
                color: "#676E75",
                fontSize: 14
            },
        },
        {
            type: 'value',
            name: '',
            nameLocation: 'middle',
            nameGap: 70,
            axisLabel: {
                formatter: '{value} %',
                color: "#676E75",
                fontSize: 14
            },
        }],
        series: []
    }
    return merge({}, lineColumnOption, option);
}

export function getMapOption(option) {
    var geoCoordMap = [];
    var mapData = china.features;
    for (var k = 0; k < mapData.length; k++) {
        var properties = mapData[k].properties;
        var itemMap = {
            name: properties.name,
            value: properties.cp,
            itemStyle: { color: '#ff9a84' }
        }
        geoCoordMap.push(itemMap);
    }
    var mapOption = {
        tooltip: {
            position: 'right',
            formatter(params) {
                var defauleValue = params.data ? params.data.value : 0;
                return params.name + "<span style='margin-right: 10px'></span>" + defauleValue
            }
        },
        geo: { // 地理坐标系组件用于地图的绘制
            map: 'china', // 表示中国地图
            zoom: 1.25, // 当前视角的缩放比例（地图的放大比例）
            label: {
                show: true,
                color: "#7D8996",
                fontSize: 14,
                offset: [-2, -10]
            },
            itemStyle: {
                borderColor: 'rgba(0, 0, 0, 0.2)',
                areaColor: "#eaeef4"
            },
            emphasis: { disabled: true },
        },
        yAxis: { axisLine: { show: false } },
        visualMap: {
            show: false,
            pieces: [
                { lte: 0, color: "#eaeef4" },
                { gt: 0, lte: 100, color: "#cddaff" },
                { gt: 100, lte: 200, color: "#aac0ff" },
                { gte: 300, color: "#95b1ff" },
            ]
        },
        series: [{
            name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: 'map',
            geoIndex: 0,
            data: []
        },
        {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: 4,
            data: geoCoordMap,
            tooltip: { show: false },
            emphasis: { show: false },
            label: { show: false }
        }]
    }
    return merge({}, mapOption, option);
}
